<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画圆和点</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css"/>
    <script src="../leaflet/leaflet.js"></script>
</head>
<body>

<div id="mapid" style="width: 960px; height: 544px;"></div>

</body>
</html>

<script>

    // 设置地图坐标，以及地图缩放等级
    var mymap = L.map('mapid').setView([43.81248, 87.60052], 15);

    // 加载高德地图接口
    L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?' + 'lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {subdomains: ["1", "2", "3", "4"]}).addTo(mymap);

    // 在地图上某个点画一个圆
    var circle = L.circle([43.81248, 87.60052], {
        color: 'green',
        fillColor: 'green',
        fillOpacity: 0.5,
        radius: 250
    }).addTo(mymap);
    // 给圈出来的区域加弹窗
    circle.bindPopup("I am a circle.");

    // 定义图标
    var myIcon = L.icon({
        iconUrl: '../images/point.png',
        iconSize: [6, 6]
    });

    // 在地图上某个点添加一个标记
    var marker = L.marker([43.81248, 87.60052],{
        icon: myIcon
    }).addTo(mymap);
    // 做一个弹窗提示当前位置
    marker.bindPopup("当前位置");

</script>